<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>大家都在买的</title>
		<link rel="stylesheet" type="text/css" href="css/style.css" />
		<style>
			body {
				background: white;
			}

			.msg {
				position: fixed;
			}
		</style>
		<script src="//unpkg.com/vue/dist/vue.js"></script>
		<script src="//unpkg.com/element-ui@2.12.0/lib/index.js"></script>
		<link rel="stylesheet" type="text/css" href="//unpkg.com/element-ui@2.12.0/lib/theme-chalk/index.css" />
	</head>
	<body>
		<div style="width: 100%;" class="divCenter" id="cotent">
			<div style="width: 75rem;background: white;padding: 1.25rem 0rem;">
				<div style="width: 17.6%;height:25rem;margin-top: 0.625rem;margin-left: 1%;margin-right: 1%;border: 0.0625rem solid gainsboro;display: flex;float: left;"
				 class="divColumn divColumnCenter product-grid" v-for="(item,index) in goodList" @mouseenter="enter(index)"
				 @mouseleave="leave(index)">
					<div style="width: 90%;height: 64%;border: 0.0625rem solid #EDEDED;margin-top: 0.625rem;" class="divCenter product-image"
					 @click="itemClick()">
						<img src="https://img13.360buyimg.com/n7/jfs/t1/76280/10/8998/450153/5d6d1538Ea9747652/9168fa014c6d9d96.jpg"
						 style="width: 90%;height: 90%;object-fit: cover;" />
					</div>
					<div style="width: 90%;height: 1.875rem;" class="leftAndRight">
						<h4>洋河梦之蓝M1</h4>
						<span style="color:#999999;">已售0件</span>
					</div>
					<div style="width: 90%;height: 3.125rem;" class="leftAndRight">
						<div class="divRow" style="height: 100%;color: #FF5516;">
							<h3>¥520.00</h3>
							<span style="margin-left: 0.625rem;font-size: 0.75rem;">包邮</span>
						</div>
						<img src="img/shop_car.png" style="cursor: pointer;" @click="addCar()" />
					</div>
					<div style="width: 90%;height: 1.875rem;" class="divRow divColumnCenter">
						<div class="divRow divColumnCenter" style="cursor: pointer;">
							<img src="img/home12.png" style="margin-right: 0.5rem;" />
							<span>收藏</span>
						</div>

						<div class="divRow divColumnCenter" style="margin-left: 0.75rem;cursor: pointer;">
							<img src="img/home10.png" style="margin-right: 0.5rem;" />
							<span>评论</span>
						</div>
					</div>
				</div>

			</div>



		</div>
		<div style="width: 100%;" class="divCenter">
			<div style="width: 75rem;background: white;height: 7.5rem;" class="divCenter">
				<div id="page">
					<el-pagination background layout="prev, pager, next" :total="1000" @current-change="curPage">

					</el-pagination>
				</div>
			</div>
		</div>
		<!-- 你可能喜欢 -->

		<div style="width: 100%;" class="divCenter" id="like">
			<div style="width: 75rem;" class="divColumn">
				<div style="width: 100%;height: 1.875rem;background: #007D36;" class="divColumnCenter">
					<span style="color: white;margin-left: 0.625rem;">猜你喜欢</span>
				</div>
				<div style="width: 99.90%;height:31.25rem;border: 0.0625rem solid #007D36;background: white;">
					<div style="width: 20%;height:25rem;margin-top: 0.625rem;margin-left: 6.2%;margin-right: 6.2%;border: 0.0625rem solid gainsboro;display: flex;float: left;"
					 class="divColumn divColumnCenter product-grid" v-for="(item,index) in likeList">
						<div style="width: 90%;height: 64%;border: 0.0625rem solid #EDEDED;margin-top: 0.625rem;" class="divCenter product-image"
						 @click="likeClick()">
							<img src="https://img13.360buyimg.com/n7/jfs/t1/76280/10/8998/450153/5d6d1538Ea9747652/9168fa014c6d9d96.jpg"
							 style="width: 90%;height: 90%;object-fit: cover;cursor: pointer;" />
						</div>
						<div style="width: 90%;height: 1.875rem;" class="leftAndRight">
							<h4>洋河梦之蓝M1</h4>
							<span style="color:#999999;">已售0件</span>
						</div>
						<div style="width: 90%;height: 3.125rem;" class="leftAndRight">
							<div class="divRow" style="height: 100%;color: #FF5516;">
								<h3>¥520.00</h3>
								<span style="margin-left: 0.625rem;font-size: 0.75rem;">包邮</span>
							</div>
							<img src="img/shop_car.png" style="cursor: pointer;" @click="addCarLick()" />
						</div>
						<div style="width: 90%;height: 1.875rem;" class="divRow divColumnCenter">
							<div class="divRow divColumnCenter" style="cursor: pointer;">
								<img src="img/home12.png" style="margin-right: 0.5rem;" />
								<span>收藏</span>
							</div>

							<div class="divRow divColumnCenter" style="margin-left: 0.75rem;cursor: pointer;">
								<img src="img/home10.png" style="margin-right: 0.5rem;" />
								<span>评论</span>
							</div>
						</div>
					</div>


				</div>





			</div>






		</div>








		<script src="js/jquery-2.1.4.js"></script>
		<script>
			var cotent = new Vue({
				el: '#cotent',
				data: {
					goodList: ['', '', '', '', '', '', '', '']


				},
				methods: {
					enter(index) {



					},
					leave(index) {

					},
					itemClick: function() {
						location.href = 'goodDetails.html'
					},
					addCar: function() {

						this.$message({
							message: '加入购物车成功',
							type: 'success',
							customClass: 'msg'
						});


					}


				}
			});
			var app = new Vue({
				el: '#page',
				data: {},
				methods: {
					curPage(e) {
						console.log(e); //--- 点击所在的页面，从 1 开始算起

					},
				}
			});
			var like = new Vue({
				el: '#like',
				data: {
					likeList: [{}, {}, {}


					]

				},
				methods: {
					likeClick: function() {
						location.href = 'goodDetails.html'
					},
					addCarLick: function() {
						this.$message({
							message: '加入购物车成功',
							type: 'success',
							customClass: 'msg'
						});
					}
				}
			})
		</script>


	</body>
</html>
